<template>
	<view>
		<view>
			<view class="xinxi"><text>{{$t('user.zhanghu')}}：{{tel}}</text></view>
			<view class="xinxi">{{$t('user.yue')}}：{{jine}}<text style="font-size: 16px; color: gray;">{{$t('app.kips')}}</text></view>
			<view style="margin-top: 20px;">
				<text class="liu2">{{$t('user.flow')}}</text>
				<view class="taocan">
					<view>
						<view class="liu">{{$t('user.yyflow')}}</view>
						<view>
							<text class="liu2_1">{{flow}}</text><text class="liu2_2">GB</text>
						</view>
					</view>
					<view>
						<view class="liu">{{$t('index.flow')}}</view>
						<view>
							<text class="liu2_1">{{allflow-flow}}</text><text class="liu2_2">GB</text>
						</view>
					</view>
					<view>
						<view class="liu">{{$t('user.zongflow')}}</view>
						<view>
							<text class="liu2_1">{{allflow}}</text><text class="liu2_2">GB</text>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="taocan">
				<text>语音</text>
			</view>
			<view class="taocan">
				<text>短信</text>
			</view> -->
			<view style="margin-top: 20px;">
				<text class="liu2">{{$t('user.flowpack')}}</text>
				<view class="liuliangbao">
					<view class="lalala">
						<view>{{$t('user.kyflowpack')}}</view>
						<view>{{$t('user.flowpackdate')}}</view>
					</view>
					<view class="lalala" v-for="(item,i) in combo">
						<view class="hahaha">{{item.combo.comboName}}</view>
						<view class="hahaha">{{item.dueTime}}</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 20px;">
				<text class="liu2">{{$t('userdesc.title')}}</text>
				<view class="taocan">
					<view>
						<view class="liu">{{$t('index.integral')}}</view>
						<view>
							<text class="liu2_3">{{jifen}}</text>
						</view>
					</view>
					<view>
						<view class="liu">{{$t('index.bonus')}}</view>
						<view>
							<text class="liu2_3">{{jiangjin}}{{$t('app.kips')}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getResponseData, showToastTip,getBaseUrl,getWsUrl} from "@/api/req.js";
	export default {
		data() {
			return {
				tel: "123456",
				jine: "100",
				flow: "20",
				allflow: "20",
				package: 1,
				packagedate: '2023-08-27',
				jifen: 0,
				jiangjin: 0,
				combo:[]
			}
		},
		onLoad() {
			this.tel = uni.getStorageSync("etlSim");
			var that = this;
			getResponseData("/userInfo/getUserInfo", 'get', {}, function(res) {
				console.log(res);
				if (res.code == 200) {
					that.jine = res.data.balance;
					that.flow = ((res.data.useLiuliang) / 1024).toFixed(2);
					that.allflow = ((res.data.liuliang) / 1024).toFixed(2);
					that.jifen = res.data.jifen;
				 	that.jiangjin = res.data.bonus;
					that.combo = res.data.businessHistoryList;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					})
				}
			})
		},
		methods: {

		}
	}
</script>

<style>
	.hahaha{
		width: 50%;text-align: center;
	}
	.lalala{
		display: flex;justify-content: space-around;padding: 6px 0;
	}
	.xinxi {
		padding-top: 10px;
		font-size: 18px;
		line-height: 30px;
		padding-left: 10px;
	}

	.taocan {
		width: 95%;
		margin: auto;
		margin-top: 10px;
		height: 100px;
		border: 1px #1eb9ee solid;
		border-radius: 5px;
		display: flex;
		justify-content: space-around;
	}
	
	.liuliangbao{
		width: 95%;
		margin: auto;
		margin-top: 10px;
		border: 1px #1eb9ee solid;
		border-radius: 5px;
		display: flex;
		justify-content: space-around;
		flex-direction: column;
	}

	.taocan>view {
		width: 30%;
		text-align: center;
	}

	.liu {
		font-size: 16px;
		color: gray;
		line-height: 50px;
	}

	.liu2 {
		font-size: 18px;
		font-weight: 600;
		border-left: #014099 3px solid;
		line-height: 30px;
		margin-left: 10px;
		padding-left: 10px;
	}

	.liu2_1 {
		font-size: 20px;
		font-weight: 600;
	}

	.liu2_2 {
		font-size: 12px;
	}

	.liu2_3 {
		font-size: 16px;
	}
</style>